<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	        .box {
	            margin: 100px;
	            width: 460px;
	        }
	
	        .box .btn {
	            height: 40px;
	            margin-bottom: 5px;
	        }
	
	        .box .btn input {
	            float: left;
	            width: 100px;
	            text-align: center;
	            height: 40px;
	            margin-right: 20px;
	            border: 1px solid #334455;
	        }
	
	        .box .btn input:nth-child(4) {
	            margin-right: 0px;
	        }
	
	        .box .con {
	            width: 460px;
	            height: 400px;
	            border: 1px solid #ccc;
	            box-sizing: border-box;
	            display: none;
	        }
	
	        .box .btn .active {
	            background: orange;
	        }
	    </style>
	</head>
	
	<body>
	    <div class="box">
	        <div class="btn">
	            <input type="button" class="btnList active" value="体育">
	            <input type="button" class="btnList" value="娱乐">
	            <input type="button" class="btnList" value="新闻">
	            <input type="button" class="btnList" value="教育">
	        </div>
	        <div class="con" style="display: block;">体育</div>
	        <div class="con">娱乐</div>
	        <div class="con">新闻</div>
	        <div class="con">教育</div>
	    </div>
			<script type="text/javascript">
				//获取按钮元素
				var btn=document.getElementsByTagName('input');
				
				//通过class获取选项卡元素
				var con=document.getElementsByClassName('con')
				
				//给按钮循环绑定点击事件
				for(var i=0;i,btn.length;i++){
					//给每一个按钮添加一个idx的属性，并赋值为按钮的索引
					btn[i].idx=i;
					btn[i].onclick=function(){
						//排他
						//把所有按钮的active名去掉
						//因为存在btnList名所以不能用 '' 来替换active名
						for(var j=0;j<btn.length;j++){
							btn[j].className='btnList';
							//把下面的从隐藏
							con[j].style.display='none';
							
						}
						//给当前点击元素添加active，使用this来表示当前添加的元素
						this.className='btnList active';
						//根据按钮的索引，拿到对应的con集合里的元素来显示
						con[this.idx].style.display='block';
						
					}
				}
			</script>
	</body>
</html>
